<!--数据聚合-->
<template>
        <div id="main" style="width:1000px;height:600px;margin: 10px auto;"></div>
</template>
<script>
    import request from "../utils/request";

    const echarts = require('echarts');
    var ecStat = require('echarts-stat');

    export default{
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 20,
                total: 0,
                tableData: [],
                company: ["阿里巴巴","华为","牛客网","小米","猿辅导"],
                data0: [],
                data1: [],
            };
        },
        created() {

        },
        methods: {
            initCharts () {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;


                    request.get("/scatterClustering",{ // 请求/scatterClustering接口
                            params: {
                                    pageNum: this.currentPage,
                                    pageSize: this.pageSize,
                                    search: this.search
                            }
                    }).then(res=>{
                            // console.log(res);
                            echarts.registerTransform(ecStat.transform.clustering);

                            this.data0=[];
                            this.company=[];

                            for (var i=0;i<res.data.records.length;i++)
                            {
                                    this.data0.push([res.data.records[i]['hotValue'],res.data.records[i]['avgSalary'],res.data.records[i]['company']]);
                                    this.company.push(res.data.records[i]['company']);
                            }

                            // console.log(this.data0,this.company);

                            var data=this.data0;

                            var CLUSTER_COUNT = 3;
                            var DIENSIION_CLUSTER_INDEX = 3;  //输出数据三维，如[90.43,22739,"字节跳动"]
                            var COLOR_ALL = [
                                    '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
                            ];
                            var pieces = [];
                            for (var i = 0; i < CLUSTER_COUNT; i++) {
                                    pieces.push({
                                            value: i,
                                            label: '聚类 ' + (i+1),
                                            color: COLOR_ALL[i]
                                    });
                            }

                            option = {
                                    title: {
                                            text: '互联网公司梯队分布（数据聚合图）',
                                            subtext: '数据截止至: 2021.08.08'
                                    },
                                    toolbox: {  // 显示保存图片的按钮
                                            show: true,
                                            orient: 'horizontal',
                                            bottom: 10,
                                            right: 20,
                                            feature: {
                                                    saveAsImage: {}
                                            }
                                    },
                                    dataset: [{
                                            source: data
                                    }, {
                                            transform: {
                                                    type: 'ecStat:clustering',
                                                    // print: true,
                                                    config: {
                                                            clusterCount: CLUSTER_COUNT,
                                                            outputType: 'single',
                                                            dimensions: [0, 1],
                                                            outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX,
                                                    }
                                            }
                                    }],
                                    tooltip: {
                                            position: 'top'
                                    },
                                    visualMap: {
                                            type: 'piecewise',
                                            top: 'middle',
                                            min: 0,
                                            max: CLUSTER_COUNT,
                                            left: 20,
                                            splitNumber: CLUSTER_COUNT,
                                            dimension: DIENSIION_CLUSTER_INDEX,
                                            pieces: pieces
                                    },
                                    grid: {
                                            left: 180  // 坐标轴的位置，left越大越向右偏
                                    },
                                    xAxis: {
                                            min: 50  // 设置x轴的最小值
                                    },
                                    yAxis: {
                                            min: 10000
                                    },
                                    series: {
                                            type: 'scatter',
                                            encode: {
                                                    tooltip: [0, 1]
                                            },
                                            symbolSize: 15,
                                            itemStyle: {
                                                    borderColor: '#555',
                                                    normal: {
                                                            label: {
                                                                    color: '#070707',
                                                                    show: true,
                                                                    position: 'top',
                                                                    formatter: function (params) {
                                                                            // console.log(params.value,"here")
                                                                            return params.value[2];
                                                                    },
                                                            },
                                                    },
                                            },
                                            datasetIndex: 1
                                    }
                            };

                            option && myChart.setOption(option);
                    })

            },
        },

        mounted () {
            this.initCharts();
            console.log("mounted")
        }
    }
</script>

<style scoped>

</style>